<template>
    <div class="ResourceCalculator">
        <div  class="backgrounds">
            <div @click.stop="CancelLogin" class="nav">
                <div class="nav-inner">
                    <ul class="nav-menu clearfix">
                        <li @click="Jump" style="display: inline-flex;">
                            <img style="width: 48px;height: 48px;margin-top: 8px;" src="../assets/logo/logo.png" alt="">
                            <div>成都市政务云监管平台</div>
                        </li>
                        <li @click="Jumps('Notification')">
                            <a style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                "
                            href="/#/Notification">官网公告</a>
                        </li>
                        <li @click="Jumps('help')">
                            <a style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                "
                            href="/#/help">帮助与支持</a>
                        </li>
                        <li>
                            <a href="/#/ResourceCalculator" style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                border-bottom: 4px solid #fff;
                                "
                            >资源计算器</a>
                        </li>

                    </ul>
                    <ul class="nav-login clearfix">
                        <li @click.stop="chengeState">
                            <div class="home-button">登录</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div @click.stop="CancelLogin" class="carousel-inner">
                <div class="box">
                    <img src="../assets/icons/bckg-yunchucun.jpg" alt="" />
                </div>
                <div class="H1_title">
                    资源计算器
                </div>
                <div class="H3_title">使用说明：请根据迁移上云业务的实际需求，填写所需的资源配置及数量，计算预估费用。</div>
            </div>
            <el-form  label-width="100px">
                <div class="right-content container-fluid">
                    <div class="row">
                        <h1>云服务商</h1>
                        <el-row class="row_item">
                            <el-col :span="18">
                                <el-form-item style="display:inline-block;" label="云服务商">
                                    <el-select @change="ChangecloudSupplier" clearable v-model="form.supplier">
                                        <el-option
                                        v-for="item in cloudSupplierList"
                                        :key="item.cloudSupplier"
                                        :label="item.cloudSupplierName"
                                        :value="item.cloudSupplier">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="display:inline-block;" label="" label-width="10px">
                                    <!-- <el-radio-group  v-model="form.isXc">
                                        <el-radio label="true">信创</el-radio>
                                        <el-radio label="false">非信创</el-radio>
                                    </el-radio-group> -->
                                    <!-- <el-switch @change="ChangeisXc" v-model="form.isXc"></el-switch> -->
                                <div style="display:inline-block;margin-left: 20px;transform: scale(1.5);">
                                  <span
                                  @click="ChangeisXc(!form.isXc)"
                                   :style="{cursor: 'pointer',position: 'absolute',zIndex: 1000,color: 'white',fontSize:'11px',
                                   marginLeft:form.isXc?'10px':'22px'}">{{form.isXc?'信创':'非信创'}}</span>
                                    <el-switch
                                    width="70"
                                      v-model="form.isXc"
                                      @change="ChangeisXc"
                                      active-color="#5BC0DE"
                                      inactive-color="#13ce66">
                                    </el-switch>


                                </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div  v-if="State" style="max-width: 1100px;">

                        <div class="row">
                            <h1>云主机</h1>
                            <el-row class="row_title">
                                <el-col :span="18">配置</el-col>
                                <el-col :span="6"></el-col>
                            </el-row>
                            <el-row class="row_item" v-for="(item,index) in form.CloudHost" :key="index">
                                <el-col :span="13" style="height: 36px;">
                                    <el-form-item style="display:inline-block;" label="虚拟机规格">
                                        <el-select @change="((val)=>{CloudHostChange(val,index)})"  clearable v-model="form.CloudHost[index].virtualMachine">
                                            <el-option
                                            v-for="item in CloudserverList"
                                            :key="item.id"
                                            :label="item.specName"
                                            :value="item.specName">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="13" style="height: 36px;margin-top: 10px"  v-if="form.CloudHost[index].zidingyiState">
                                   <el-form-item style="display:inline-block;" label="CPU">
                                       <el-input type='number' min="0" style="display:inline-block;width: 99px" v-model="form.CloudHost[index].CPU.useCount"></el-input>
                                         <div style="display:inline-block;width: 46px;color: #fff;background: #5cb85c;height: 32px;text-align: center;line-height: 32px;float: right;margin-top: 2px;">
                                            核
                                           </div>
                                   </el-form-item>
                                   <el-form-item style="display:inline-block;" label-width="76px" label="內存">
                                       <el-input type='number' min="0" style="display:inline-block;width: 99px" v-model="form.CloudHost[index].Memory.useCount"></el-input>
                                       <!-- <div style="display:inline-block;width: 46px;color: #fff;background: #5cb85c;height: 32px;text-align: center;line-height: 32px;float: right;margin-top: 2px;"> -->
                                            <div style="display:inline-block;width: 46px;color: #fff;background: #5cb85c;height: 32px;text-align: center;line-height: 32px;float: right;margin-top: 2px;">
                                          GB
                                          </div>
                                       <!-- </div> -->
                                   </el-form-item>
                                </el-col>
                                <el-col :span="13" style="height: 36px;margin-top: 10px;">
                                    <el-form-item style="display:inline-block;" label="存储">
                                        <el-select @change="((val)=>{CloudStorageChange(val,index)})" v-model="form.CloudHost[index].storage.resourceCode">
                                            <el-option
                                            v-for="item in CCserverList"
                                            :key="item.id"
                                            :label="item.serviceName"
                                            :value="item.code">
                                            </el-option>
                                        </el-select>
                                        <el-input type='number' min="0" style="display:inline-block;width: 99px;margin-left:10px" v-model="form.CloudHost[index].storage.useCount"></el-input>
                                         <!-- style="display:inline-block;width: 46px;color: #fff;background: #5cb85c;height: 32px;text-align: center;line-height: 32px;float: right;margin-top: 2px; -->
                                       <div style="display:inline-block;margin-left: 20px;transform: scale(1.5);">
                                            <!-- GB -->
                                            <span
                                            @click="switchChange(index,true)"
                                             :style="{cursor: 'pointer',position: 'absolute',zIndex: 1000,color: 'white',fontSize:'11px',
                                             marginLeft:form.CloudHost[index].storage.type?'10px':'22px'}">{{form.CloudHost[index].storage.type?'TB':'GB'}}</span>
                                              <el-switch
                                              width="45"
                                                v-model="form.CloudHost[index].storage.type"
                                                @change="switchChange(index)"
                                                active-color="#5BC0DE"
                                                inactive-color="#13ce66">
                                              </el-switch>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <div class="row_button" style="padding:10px 0 0 0;margin-left: 0px;">
                                        <el-form-item style="display:inline-block;margin-left: -6px;" label="台数">
                                            <el-input type='number' min="0" style="display:inline-block;width: 99px" v-model="form.CloudHost[index].num"></el-input>
                                           <div style="display:inline-block;width: 46px;color: #fff;background: #5cb85c;height: 32px;text-align: center;line-height: 32px;float: right;margin-top: 2px;">
                                              台
                                           </div>
                                        </el-form-item>
                                        <div class="btn btn-info" v-if="form.CloudHost.length > 1" @click="DelectCloudHost(index)">
                                            <i class="el-icon-close glyphicon"></i>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <div class="row_button">
                                <div class="btn btn-info" @click="PlusCloudHost">
                                    <i class="el-icon-plus glyphicon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="row" v-show="CCserverList.length > 0">
                            <h1>存储</h1>
                            <el-row class="row_title">
                                <el-col :span="18">配置</el-col>
                                <el-col :span="6"></el-col>
                            </el-row>
                            <el-row class="row_item" v-for="(item,index) in form.storage" :key="index">
                                <el-col :span="18" style="height: 36px;">
                                    <el-form style="height: 36px;" label-width="100px">
                                        <el-form-item style="display:inline-block;" label="存储">
                                            <el-select @change="((val)=>{StorageChange(val,index)})"  v-model="form.storage[index].resourceCode">
                                                <el-option
                                                v-for="items in CCserverList"
                                                :key="items.id"
                                                :label="items.serviceName"
                                                :value="items.code">
                                                </el-option>
                                            </el-select>
                                            <el-input type='number' min="0" style="display:inline-block;width: 99px;margin-left:10px" v-model="form.storage[index].useCount"></el-input>

                                            <div style="display:inline-block;margin-left: 20px;transform: scale(1.5);">
                                                <!-- GB -->
                                                <span
                                                @click="switchChange2(index,true)"
                                                 :style="{cursor: 'pointer',position: 'absolute',zIndex: 1000,color: 'white',fontSize:'11px',
                                                 marginLeft:form.storage[index].type?'6px':'22px'}">{{form.storage[index].type?'TB':'GB'}}</span>
                                                  <el-switch
                                                  width="45"
                                                    v-model="form.storage[index].type"
                                                    @change="switchChange2(index)"
                                                    active-color="#5BC0DE"
                                                    inactive-color="#13ce66">
                                                  </el-switch>
                                            </div>

                                        </el-form-item>
                                    </el-form>
                                </el-col>
                                <el-col :span="6">
                                    <div class="row_button" style="padding:0;margin-left: 0px;">
                                        <div class="btn btn-info" v-if="form.storage.length > 1" @click="DelectStorage(index)">
                                            <i class="el-icon-close glyphicon"></i>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <div class="row_button">
                                <div class="btn btn-info" @click="PlusStorage">
                                    <i class="el-icon-plus glyphicon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="row"  v-show="WLFWQserverList.length > 0">
                            <h1>高性能服务器</h1>
                            <el-row class="row_item" v-for="(item,index) in WLFWQserverList" :key="index" v-if="index<1">
                                <el-col :span="18" style="height: 36px;">
                                    <el-form style="height: 36px;" label-position="right" label-width="260px">
                                        <el-form-item style="display:inline-block;" :label="item.serviceName">
                                            <el-input type='number' min="0" max="100" @input="((val)=>{WLFWQChange(val, item)})" style="display:inline-block;width: 100px;margin-left:10px" v-model="form[item.code].useCount"></el-input>
                                            <!-- <div style="float: right;margin-left:20px"><span>{{item.remark}}</span></div> -->
                                            <div style="display:inline-block;width: 46px;color: #fff;background: #5cb85c;height: 32px;text-align: center;line-height: 32px;float: right;margin-top: 2px;">
                                                台
                                            </div>
                                        </el-form-item>
                                    </el-form>
                                </el-col>

                            </el-row>
                        </div>
                        <div class="row" >
                            <h1>购买时长</h1>
                            <el-row class="row_item">
                                <el-select style="width: 130px;" v-model="form.PurchaseDurationYear">
                                    <el-option
                                    v-for="item in YearList"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                    </el-option>
                                </el-select>
                                年
                                <el-select style="width: 130px;" v-model="form.PurchaseDurationMonth">
                                    <el-option
                                    v-for="item in MonthList"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                    </el-option>
                                </el-select>
                                月
                            </el-row>
                        </div>
                        <div class="row" >
                        <h1>费用预估 <span style="font-size:14px;color:#ccc">(* 该费用仅供参考，请以申请时的结算价格为准)</span></h1>
                        <el-row class="row_item">
                            <el-button type="primary" @click="CostCalcula">费用计算</el-button>
                            <span style="margin-left:10px;">预估费用总计： ￥ <span style="color:red;font-size:20px;">{{this.TotalPrice ?parseInt(this.TotalPrice)  : '-'}}</span></span>
                        </el-row>
                    </div>
                </div>
                </div>
            </el-form>
            <div
                class="suspension"
                :style="LoginStatus ? 'right: 0px;' : 'right: -800px;'"
            >
                <el-row
                    class="el-suspension"
                    style="
                        margin-top: calc(50% - 161px);
                        height: 322px;
                        width: 700px;
                        margin-left: 50px;
                    "
                >
                    <el-col :span="12">
                        <div class="BackgroundImg"></div>
                    </el-col>
                    <el-col
                        :span="12"
                        style="padding: 25px 25px 5px 25px; background: #fff"
                    >
                        <el-form
                            ref="loginForm"
                            :model="loginForm"
                            :rules="loginRules"
                            class="login-form"
                        >
                            <h3 class="title">成都市政务云</h3>
                            <el-form-item prop="username">
                                <el-input
                                    v-model="loginForm.username"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="账号"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="user"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    v-model="loginForm.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="密码"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="password"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input
                                    v-model="loginForm.code"
                                    auto-complete="off"
                                    placeholder="验证码"
                                    style="width: 63%"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="validCode"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                                <div class="login-code">
                                    <img
                                        :src="codeUrl"
                                        @click="getCode"
                                        class="login-code-img"
                                    />
                                </div>
                            </el-form-item>
                            <el-form-item style="width: 100%">
                                <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width: 100%"
                                    @click.native.prevent="handleLogin"
                                >
                                    <span v-if="!loading">登 录</span>
                                    <span v-else>登 录 中...</span>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { treeselect } from "@/api/system/dept";
import { getDicts } from "@/api/system/dict/data";
// import { listByCode, serviceByClazz } from "@/api/resources/apply";
import { CCserver,WLFWQserver,Cloudserver,cloudSupplier,calculator } from "@/api/NoTokenapi/index";
import { speclist,serviceByClazz } from "@/api/NoTokenapi/index";
import { helpList } from "@/api/system/user";
  import {
    getRouters
  } from "@/api/menu.js";
export default {
    data(){
        return{
            active: 0,
            type: 1,
            notice: [],
            Notice: [],
            loading: false,
            base_url: process.env.VUE_APP_BASE_API,
            detailsData: null,
            loginForm: {
                username: "", //test_cloud_manage
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            State:false,
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "用户名不能为空",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "密码不能为空",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "验证码不能为空",
                    },
                ],
            },
            productServiceTitleState: 0,
            LoginStatus: false,
            codeUrl: "",
            cookiePassword: "",
            redirect: undefined,
            YearList:[
                0,1,2,3,4,5,6,7,8,9,10
            ],
            MonthList:[
                0,1,2,3,4,5,6,7,8,9,10,11
            ],
            ysForm:null,
            form:{
                supplier:'',
                PurchaseDurationYear:0,
                PurchaseDurationMonth:0,
                isXc:false,
                CloudHost:[
                    {
                        zidingyiState:false,
                        virtualMachine:'',
                        num:1,
                        CPU:{
                            resourceCode:'vcpu',
                            resourceName:'vcpu',
                            useCount:0
                        },
                        Memory:{
                            resourceCode:'memory',
                            resourceName:'memory',
                            useCount:0,
                        },
                        storage:{
                            resourceCode:'',
                            resourceName:'',
                            useCount:0,
                            type:false
                        },
                    }
                ],
                storage:[
                    {
                        resourceCode:'',
                        resourceName:'',
                        useCount:0,
                       type :false
                    }
                ],
                ljsw:[],
                ljswlfwq1:{
                    resourceCode:'',
                    resourceName:'',
                    useCount:0
                },
                ljswlfwq2:{
                    resourceCode:'',
                    resourceName:'',
                    useCount:0
                },
                ljswlfwq3:{
                    resourceCode:'',
                    resourceName:'',
                    useCount:0
                },
                ljswlfwq4:{
                    resourceCode:'',
                    resourceName:'',
                    useCount:0
                },
                ljswlfwq5:{
                    resourceCode:'',
                    resourceName:'',
                    useCount:0
                },
            },
            CCserverList:[],
            WLFWQserverList:[],
            CloudserverList:[],
            cloudSupplierList:[],
            TotalPrice:0,
            list: [],
        }
    },
    created(){
        this.ysForm=JSON.parse(JSON.stringify(this.form))
        this.getCode();
        this.getCookie();
        this.helpList();
        // CCserver().then(res=>{
        //     this.CCserverList = res.data
        // })
        // WLFWQserver().then(res=>{
        //     this.WLFWQserverList = res.data
        // })
        // Cloudserver().then(res=>{
        //     this.CloudserverList = res.data
        //     this.CloudserverList.push({
        //         desc:'自定义',
        //         specCode:'zidingyi'
        //     })
        // })
        cloudSupplier().then(res=>{
            this.cloudSupplierList = res.rows
        })
    },
    methods:{
      switchChange(index,flag){
        if(flag){
          this.form.CloudHost[index].storage.type=!this.form.CloudHost[index].storage.type
        }
        setTimeout(()=>{
          if(this.form.CloudHost[index].storage.type){
           this.form.CloudHost[index].storage.useCount= this.form.CloudHost[index].storage.useCount/1024
          }else{
            this.form.CloudHost[index].storage.useCount=this.form.CloudHost[index].storage.useCount*1024
          }
        })
      },
      switchChange2(index,flag){
        if(flag){
          this.form.storage[index].type=!this.form.storage[index].type
        }
        setTimeout(()=>{
          if(this.form.storage[index].type){
           this.form.storage[index].useCount= this.form.storage[index].useCount/1024
          }else{
            this.form.storage[index].useCount=this.form.storage[index].useCount*1024
          }
        })
      },
      helpList(){
        helpList({fileType:'工具上传',pageNum:1,pageSize:100000}).then(res=>{
          console.log(res,'xxxx')
          if(res.success){
            this.list=res.rows
          }
        })
      },
      down(url){
        window.open(this.base_url+url)
      },
        // 费用预估
        CostCalcula(){
            var CostCalculaObj = {
                costDetails:[],
                days:'',
                supplier:''
            }
            CostCalculaObj.supplier = this.form.supplier
            CostCalculaObj.days = ((this.form.PurchaseDurationYear*12) + Number(this.form.PurchaseDurationMonth)) * 30
            if(!CostCalculaObj.supplier){
                this.$message({
                    message: '请选择云服务商',
                    type: 'warning'
                });
                return
            }
            if(CostCalculaObj.days == 0){
                this.$message({
                    message: '购买时长最少一个月',
                    type: 'warning'
                });
                return
            }
            this.loading = true
            // 拆分存储
            this.form.storage.forEach(item=>{
                if(item.resourceCode && item.resourceName && item.useCount){
                  let server = JSON.parse(JSON.stringify(item));//用这种方式拷贝对象，可以创建新的引用
                  if(!item.type){
                    server.useCount = server.useCount/1024;//存储转化为TB
                  }
                  CostCalculaObj.costDetails.push(server)
                }
            })
            // 拆分高性能服务器
            if(this.form.ljswlfwq1.resourceCode && this.form.ljswlfwq1.resourceName && this.form.ljswlfwq1.useCount){
                CostCalculaObj.costDetails.push(this.form.ljswlfwq1)
            }
            if(this.form.ljswlfwq2.resourceCode && this.form.ljswlfwq2.resourceName && this.form.ljswlfwq2.useCount){
                CostCalculaObj.costDetails.push(this.form.ljswlfwq2)
            }
            if(this.form.ljswlfwq3.resourceCode && this.form.ljswlfwq3.resourceName && this.form.ljswlfwq3.useCount){
                CostCalculaObj.costDetails.push(this.form.ljswlfwq3)
            }
            if(this.form.ljswlfwq4.resourceCode && this.form.ljswlfwq4.resourceName && this.form.ljswlfwq4.useCount){
                CostCalculaObj.costDetails.push(this.form.ljswlfwq4)
            }
            if(this.form.ljswlfwq5.resourceCode && this.form.ljswlfwq5.resourceName && this.form.ljswlfwq5.useCount){
                CostCalculaObj.costDetails.push(this.form.ljswlfwq5)
            }
            // 拆分云主机
            let CloudHost=JSON.parse(JSON.stringify(this.form.CloudHost))
            CloudHost.forEach(item=>{
              item.CPU.useCount=item.CPU.useCount*item.num
              item.Memory.useCount=item.Memory.useCount*item.num
                if(item.CPU.resourceCode && item.CPU.resourceName && item.CPU.useCount){
                    CostCalculaObj.costDetails.push(item.CPU)
                }
                if(item.Memory.resourceCode && item.Memory.resourceName && item.Memory.useCount){
                    CostCalculaObj.costDetails.push(item.Memory)
                }
                if(item.storage.resourceCode && item.storage.resourceName && item.storage.useCount){
                  let server = JSON.parse(JSON.stringify(item.storage));//用这种方式拷贝对象，可以创建新的引用
                  if(!item.storage.type){
                    server.useCount = server.useCount/1024;//存储转化为TB
                  }
                  CostCalculaObj.costDetails.push(server)
                }
            })
            calculator(CostCalculaObj).then(res=>{
                this.loading = false
                this.TotalPrice = res.data
            }).catch(err=>{
                this.loading = false
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            })
        },
        ChangecloudSupplier(val){
            console.log(val,88)
            if(this.form.supplier && this.form.isXc.toString()){
                speclist({
                    category:this.form.isXc ?'xcecs' : 'spec_ecs',
                    supplier:val
                }).then(res=>{
                    console.log(res)
                    res.rows.push({
                      supplier:'zidingyi',
                      specName:'自定义'
                    })
                    this.CloudserverList = res.rows
                    // 存储
                    serviceByClazz({
                        cloudSupplier:val,
                        code:this.form.isXc ? 'xccc' : 'cc'
                    }).then(res=>{
                        this.CCserverList = res.data
                        // 高性能服务器
                        serviceByClazz({
                            cloudSupplier:val,
                            code:this.form.isXc ? 'scwlfwq' : 'wlfwq'
                        }).then(res=>{
                            this.WLFWQserverList = res.data
                            this.State = true
                        })
                    })
                })
            }else{
                this.State = false
            }
        },
        ChangeisXc(val){
            this.form=JSON.parse(JSON.stringify(this.ysForm))
            this.form.isXc=val
            console.log(val)
            if(this.form.supplier && this.form.isXc.toString()){
                if(this.form.supplier){
                    // 获取规格
                    speclist({
                    category:val ?'xcecs' : 'spec_ecs',
                    supplier:this.form.supplier
                }).then(res=>{
                    console.log(res)
                    res.rows.push({
                      supplier:'zidingyi',
                      specName:'自定义'
                    })
                    this.CloudserverList = res.rows
                    // 存储
                    serviceByClazz({
                        cloudSupplier:this.form.supplier,
                        code:val ? 'xccc' : 'cc'
                    }).then(res=>{
                        this.CCserverList = res.data
                        // 高性能服务器
                        serviceByClazz({
                            cloudSupplier:this.form.supplier,
                            code:val ? 'xcwlfwq' : 'wlfwq'
                        }).then(res=>{
                            this.WLFWQserverList = res.data
                            this.State = true
                        })
                    })
                })
                }else{
                    this.$message({
                        message: '请选择云服务商',
                        type: 'warning'
                    });
                }
            }else{
                this.State = false
            }
        },
        CloudHostChange(val,index){
          console.log(this.form.CloudHost,val,index,'sss')
            if(val == '自定义'){
                this.form.CloudHost[index].zidingyiState = true
                return
            }
            if(val && val !=0){
                this.form.CloudHost[index].zidingyiState = false
                this.CloudserverList.forEach(item=>{
                    if(item.specName == val){
                        // CPU赋值
                        this.form.CloudHost[index].CPU.resourceCode = item.cpuCode
                        this.form.CloudHost[index].CPU.resourceName = item.cpuCode
                        this.form.CloudHost[index].CPU.useCount = item.cpuNumber
                        // 内存赋值
                        this.form.CloudHost[index].Memory.resourceCode = item.memoryCode
                        this.form.CloudHost[index].Memory.resourceName = item.memoryCode
                        this.form.CloudHost[index].Memory.useCount = item.memorySize
                    }
                })
            }else{
                this.zidingyiState = false
                this.form.CloudHost[index].CPU.resourceCode = ''
                this.form.CloudHost[index].CPU.resourceName = ""
                this.form.CloudHost[index].CPU.useCount = 0
                // 内存赋值
                this.form.CloudHost[index].Memory.resourceCode = ""
                this.form.CloudHost[index].Memory.resourceName = ""
                this.form.CloudHost[index].Memory.useCount = 0
            }
        },
        CloudStorageChange(val,index){
            if(val && val !=0){
                this.CCserverList.forEach(item=>{
                    if(item.code == val){
                        this.form.CloudHost[index].storage.resourceName = item.serviceName
                    }
                })
            }else{
                this.form.CloudHost[index].storage.resourceName = ''
            }
        },
        StorageChange(val,index){
            if(val && val !=0){
                this.CCserverList.forEach(item=>{
                    if(item.code == val){
                        this.form.storage[index].resourceCode = item.code
                        this.form.storage[index].resourceName = item.serviceName
                    }
                })
            }else{
                this.form.storage[index].useCount = 0
                this.form.storage[index].resourceCode = ''
                this.form.storage[index].resourceName = ''
            }
        },
        WLFWQChange(val,data){
            if(val && val !=0){
                this.form[data.code].resourceCode = data.code
                this.form[data.code].resourceName = data.serviceName
            }else{
                this.form[data.code].useCount = 0
                this.form[data.code].resourceCode = ''
                this.form[data.code].resourceName = ''
            }
        },
        // 添加云主机
        PlusCloudHost(){
            this.form.CloudHost.push(
                {
                    zidingyiState:false,
                    virtualMachine:'',
                    num:1,
                    CPU:{
                        resourceCode:'vcpu',
                        resourceName:'vcpu',
                        useCount:0
                    },
                    Memory:{
                        resourceCode:'memory',
                        resourceName:'memory',
                        useCount:0,
                    },
                    storage:{
                        resourceCode:'',
                        resourceName:'',
                        useCount:0,
                        type:false
                    },
                }
            )
        },
        // 删除指定云主机
        DelectCloudHost(index){
            this.$confirm('此操作将永久删除该云主机配置项, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.form.CloudHost.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 添加存储
        PlusStorage(){
            this.form.storage.push({
                resourceCode:'',
                resourceName:'',
                useCount:0,
                type:false
            })
        },
        // 删除指定存储
        DelectStorage(index){
            this.$confirm('此操作将永久删除该存储配置项, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.form.storage.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        chengeState() {
            this.LoginStatus = !this.LoginStatus;
        },
        Jump(){
            this.$router.push({path:'/login'}).catch((err)=>{
            });
        },
        Jumps(Path){
            this.$router.push({path:Path}).catch((err)=>{
            });
        },
        CancelLogin(){
            if(this.LoginStatus == true){
                this.LoginStatus = false
            }
        },
        getCode() {
            getCodeImg().then((res) => {
                this.codeUrl = "data:image/gif;base64," + res.img;
                this.loginForm.uuid = res.uuid;
            });
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set("username", this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set(
                            "password",
                            encrypt(this.loginForm.password),
                            { expires: 30 }
                        );
                        Cookies.set("rememberMe", this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                        Cookies.remove("rememberMe");
                    }
                    var loginForm
                    loginForm = JSON.parse(JSON.stringify(this.loginForm))
                    const Base64 = require('js-base64').Base64
                    var secret = ".m9xVBmvdvhiTO";
                    let password = loginForm.password + secret
                    let  r = Base64.encode(password);
                    loginForm.password = Base64.encode(r)
                    this.$store.dispatch("IsInsideFunction", true);
                    this.$store
                      .dispatch("Login", loginForm)
                      .then((res) => {
                       this.$router.push({
                         path: this.redirect || "/",
                       });
                      })
                      .catch(() => {
                        this.loading = false;
                        this.getCode();
                      });
                }
            });
        },
        getConfigure() {
            let configure = {
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                yyaqList: [], //安全产品
                dept: [], //部门列表树结构
            };
            //部门列表树结构
            treeselect({}).then((response) => {
                configure.dept = response.data;
            });
            //可用域
            getDicts("available_domain").then((response) => {
                configure.available_domain = response.data;
            });
            //服务商
            getDicts("cloud_service_provider").then((response) => {
                configure.cloud_service_provider = response.data;
            });
            //盘类型
            serviceByClazz({
                code: "cc",
            }).then((response) => {
                response.data.forEach((item) => {
                    if (
                        ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        configure.storage_type.push(item);
                    }
                    if (["spycc2"].indexOf(item.code) < 0) {
                        configure.ccList.push(item);
                    }
                    if (
                        ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        configure.fwcpList.push(item);
                    }
                });
            });
            //操作系统
            serviceByClazz({
                code: "czxt",
            }).then((response) => {
                configure.czxtList = response.data;
            });
            //云服务器规格列表
            listByCode("spec_ecs").then((response) => {
                configure.codeList = response.data;
            });
            //高性能服务器资源类型列表
            serviceByClazz({
                code: "wlfwq",
            }).then((response) => {
                configure.wlfwqList = response.data;
            });
            //数据库类型列表
            serviceByClazz({
                code: "sjk",
            }).then((response) => {
                configure.sjkList = response.data;
            });
            //安全产品列表
            serviceByClazz({
                code: "yyaq",
            }).then((response) => {
                configure.yyaqList = response.data;
            });
            setTimeout(() => {
                sessionStorage.setItem("configure", JSON.stringify(configure));
            }, 5000);
        },
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get("rememberMe");
            this.loginForm = {
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            };
        },
    }
}
</script>
<style lang="scss" scoped>
.ResourceCalculator {
   overflow-y: none;
   box-sizing: border-box;
   width: 100%;
   min-height: 100vh;
   .backgrounds {
       width: 100%;
       overflow-y: none;
       // position: absolute;
       .nav {
          width: 100%;
          // width: 1920px;
          // height: 64px;
          position: absolute;
          z-index: 9;
          // min-width: 1060px;
          background: rgba($color: #000000, $alpha: 0.4);
          transition: 0.5s;
          // padding: 0 40px;
           .nav-inner {
               // width: 1200px;
               // min-width: 1080px;
               // height: 64px;
               margin: 0 auto;
               line-height: 64px;
               display: flex;
               justify-content: space-around;
               .nav-menu {
                   display: inline-block;
                   vertical-align: middle;
               }
               .clearfix {
                   zoom: 1;
               }
               ul.nav-menu > li,
               .nav-login > li {
                   float: left;
               }
               ul {
                   margin: 0;
                   padding: 0;
                   letter-spacing: 2px;
               }
               ul > li {
                   list-style-type: none;
               }
               ul.nav-menu div {
                   color: #fff;
                   display: inline-block;
                   height: 62px;
                   line-height: 62px;
                   vertical-align: middle;
                   margin: 0 15px;
                   font-size: 16px;
                   letter-spacing: 2px;
                   position: relative;
               }
               .nav-login {
                   float: right;
                   height: 64px;
                   .home-button {
                       display: inline-block;
                       height: 32px;
                       line-height: 32px;
                       text-align: center;
                       color: #fff;
                       border: 1px solid #fff;
                       margin: 15px 10px;
                       width: 90px;
                       font-size: 14px;
                       letter-spacing: 2px;
                       position: relative;
                       transition: all 0.3s;
                   }
                   .home-button:hover {
                       color: #000;
                   }
                   .home-button:hover:after {
                       width: 100%;
                   }
                   .home-button:after {
                       content: "";
                       position: absolute;
                       z-index: -9;
                       left: 0;
                       top: 0;
                       height: 100%;
                       width: 0;
                       background-color: #fff;
                       transition: all 0.3s;
                   }
               }
               ul.nav-menu > li:first-child div {
                   margin: 0 20px 0 0;
                   color: #fff;
                   font-size: 24px;
               }
           }
       }

        .nav:hover {
            background: rgba(0, 0, 0, 0.8);
            cursor: pointer;
        }
        .carousel-inner{
            position: relative;
            width: 100%;
            .box {
                // width: 1920px;
                height: 600px;
                margin: 0 auto;
                img {
                    // margin-top: -320px;
                    width: 100%;
                    height: 600px;
                }
            }
            .H1_title{
                position: absolute;
                top: 210px;
                left: 19%;
                // transform: translateX(-50%);
                font-size: 40px;
                letter-spacing: 5px;
                // color: #25a4f5;
                color: white;
            }
            .H3_title{
                position: absolute;
                // color: rgb(200,200,200);
                color: white;
                top: 290px;
               left: 19%;
                max-width: 500px;
                font-size: 14px;
                letter-spacing: 2px;
                line-height: 20px;
            }
        }
        .suspension {
            position: fixed;
            box-sizing: border-box;
            height: 100vh;
            width: 800px;
            right: 0px;
            top: 0px;
            z-index: 999;
            background: rgba($color: #000000, $alpha: 0.8);
            transition: 0.5s ease-in;
            .el-suspension{
                background: url("../assets/icons/20210526170647.jpg") no-repeat;
                background-size: 100%;
                background-position: 60%;
                .BackgroundImg {
                    width: 100%;
                    height: 322px;
                    // background: url("../assets/icons/Data.png") no-repeat;
                    // background-size: 80%;
                    // background-position: 60%;
                    // background-color: #00f2fe;
                }
                // margin: 0 30px;
                .login-form {
                    border-radius: 6px;
                    // background: #ffffff;
                    width: 300px;
                    // margin-top: 50%;
                    // margin-left: 50px;
                    // padding: 25px 25px 5px 25px;
                    box-sizing: border-box;
                    .title{
                        margin: 0px auto 30px auto;
                        text-align: center;
                        color: #707070;
                    }
                    .el-input {
                        height: 38px;
                        input {
                            height: 38px;
                        }
                    }
                    .input-icon {
                        height: 39px;
                        width: 14px;
                        margin-left: 2px;
                    }
                }
            }
            .login-tip {
                font-size: 13px;
                text-align: center;
                color: #bfbfbf;
            }
            .login-code {
                width: 33%;
                height: 38px;
                float: right;
                img {
                    cursor: pointer;
                    vertical-align: middle;
                }
            }
        }
        .right-content{
            width: 1200px;
            margin: 0 auto;
            position: relative;
            margin-bottom: 80px;
            .row{
                padding: 5px 20px;
                margin-right: -15px;
                margin-left: -15px;
                h1 {
                    font-size: 20px;
                    font-weight: bolder;
                }
                .row_title{
                    padding: 5px 20px;
                    margin-right: -15px;
                    margin-left: -15px;
                }
                .row_item{
                    padding: 5px 20px;
                    margin-right: -15px;
                    margin-left: -15px;
                }
                .row_button{
                    padding: 15px;
                    margin-right: -15px;
                    margin-left: -15px;
                    .btn-info {
                        color: #fff;
                        background-color: #5bc0de;
                        border-color: #46b8da;
                        margin-top: -2px;
                    }
                    .btn-info:hover {
                        color: #fff;
                        background-color: #31b0d5;
                        border-color: #269abc;
                    }
                    .btn {
                        display: inline-block;
                        padding: 6px 12px;
                        margin-bottom: 0;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.42857143;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: middle;
                        touch-action: manipulation;
                        cursor: pointer;
                        user-select: none;
                        background-image: none;
                        border: 1px solid transparent;
                        border-radius: 4px;
                        border-style: none;
	                    outline: none;
                        .glyphicon{
                            position: relative;
                            top: 1px;
                            display: inline-block;
                            font-family: 'Glyphicons Halflings';
                            font-style: normal;
                            font-weight: 400;
                            line-height: 1;
                            -webkit-font-smoothing: antialiased;
                        }
                    }
                }
            }
        }
        .container-fluid{
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }
    }
}
</style>
